<template>
    <xDataSpreadsheet v-if='show' class="p-reportClient"
        :config="config"
        :customConfig="customConfig"
        :templateData="templateData"
        :bindData="bindData"
        :loading="loading"
    >
        <template slot="toolbar">
            <!-- <Button @click="loadTemplate" type="primary">加载模板数据</Button> -->
            <form-create
                v-model="fapi" :rule="fields" :option="option" :value="formData"
                @submit="onSubmit" @change="onChange"
            ></form-create>
        </template>
    </xDataSpreadsheet>
</template>

<script>
import { getYearOption, getMonthOption, getCurDate } from '@/pages/costStatistics/components/utils'
import xDataSpreadsheet from 'public/components/spreadSheet'

export default {
    components: { xDataSpreadsheet },
    data() {
        let curDate = getCurDate()
        return {
            id: 33,
            loading: false,
            config: {},
            customConfig: {
                showUpload: false,
                showExport: false,
                showSave: false,
                showLoadData: false,
                isReport: true
            },
            templateData: [],
            bindData: {},
            // 筛选表单formCreate的配置：http://www.form-create.com/v2/iview/global.html
            option: {
                form: {
                    inline: true,
                    labelPosition: "right",
                    labelWidth: 80,
                    hideRequiredAsterisk: false,
                    showMessage: true,
                    inlineMessage: true,
                    size: 'default'
                },
                global: {
                },
                submitBtn: {
                    innerText: '查询'
                },
                resetBtn: false
            },
            fapi: {},
            formData: {
                year: curDate.year, month: curDate.month, report: ''
            },
           /*  formData: {
                year: '', month: '', report: ''
            }, */
            date: curDate,
            templateOptions:[],
            reportDatas:[],
            show:false,
        }
    },
    computed: {
        fields(){
            return [
                // 配置项可以参考：http://www.form-create.com/v2/iview/components/input.html
                {
                    type: 'select', field: 'year', title: '年份', options: getYearOption(9),
                    effect:{ required: true },
                },
                {
                    type: 'select', field: 'month', title: '月份', options: getMonthOption(9),
                    effect:{ required: true },
                },
                {
                    type: 'select', field: 'report', title: '报表', options: this.templateOptions,
                    effect:{ required: true },
                },
            ]
        }
    },
    mounted() {
        this.classObject=this.$modelObject.create('statTemplateModel')
        this.loadPage();
    },
    methods: {
        loadPage(){
            this.loading = true;
            this.$api.PageReport.query(
                null
            ).then(res => {
                this.loading = false;
                this.reportDatas = res;
                let options = res.filter(item=>!item.name.includes("成本")).map(item=>{
                    return {
                        label:item.name,
                        value:String(item.id),
                    };
                })
                this.templateOptions = options;
                /* this.fapi.setValue({
                    year: this.date.year, month: this.date.month, report: ''
                }); */
                this.show = true;
            })
        },
        onSubmit(filterData) {
            this.loading = true;
            let reportId = filterData.report;
            let list = this.reportDatas.filter(item=>item.id==reportId);
            if(list.length>0){
                let reportData = list[0]
                this.templateData = reportData.value;
                this.$api.StatTemplateModel.queryByIds([Number(reportData.componentId)]).then(statTemplate=>{
                    let record = statTemplate[0];
                    this.$api.Custom.energyReport({
                        condition: this.tools.getFilter({
                            type: record.type,
                            className: record.className,
                        }),
                        param: {
                            year: this.fapi.form.year,
                            month: this.fapi.form.month,
                            yearMonth: this.fapi.form.year +  this.fapi.form.month,
                            preYearMonth: this.fapi.form.year +''+  ((this.fapi.form.month - 1)<10?'0'+''+(this.fapi.form.month - 1):(this.fapi.form.month - 1)),
                        }
                    }).then(res=> {
                        this.$Message.success('查询成功！')
                        let basic = {}
                        let data = res
                        Object.keys(data).forEach(key => {
                            let curItem = data[key];
                            curItem && curItem.length && curItem.forEach(item => {
                                if (item.values && Object.keys(item.values).length) {
                                    Object.keys(item.values).forEach(valKey => {
                                        if (item.name && item.saveTo === valKey) {
                                            basic[item.name] = item.values[valKey]
                                        } else {
                                            basic[valKey] = item.values[valKey]
                                        }
                                    })
                                } else {
                                    basic[item.name] = item.title
                                }
                            })
                        })
                        this.bindData = { ...basic}
                        this.loading = false
                        console.log("🚀 ~ file: client.vue ~ loadDataFromModel res: ", this.bindData)
                    })
                })
            }
        },
        onChange(field, value) {
            if (['year', 'month'].includes(field)) {
                console.log("🚀 ~ file: client.vue:82 ~ onChange", field, value, this.fapi)
            }
        }
    }
}
</script>

<style lang="less">
.p-reportClient {
    .toolbar {
        padding-bottom: 0;
    }
    .ivu-form-item {
        margin-bottom: 16px;
    }
}
</style>